<template>
  <div>
    <div id="g_top" class="m-top">&nbsp;</div>
    <div id="g_nav" class="m-subnav">&nbsp;</div>
    <MusicSwiper></MusicSwiper>
    <div class="g-bd1 f-cb">
      <div class="g-mn1">
        <div class="g-mn1c">
          <div class="g-wrap3">
            <recommend></recommend>
            <div class="n-clmnad"></div>
            <newDj></newDj>
            <toplist></toplist>
          </div>
        </div>
      </div>
      <div class="g-sd1">
        <sidebar></sidebar>
      </div>
    </div>
  </div>
</template>

<script>
import MusicSwiper from "./home_discover/swiper";
import recommend from "./home_discover/recommend";
import newDj from "./home_discover/newCD";
import toplist from "./home_discover/toplist"
import sidebar from "./home_discover/sidebar"
export default {
  components: {
    MusicSwiper,
    recommend,
    newDj,
    toplist,
    sidebar
  },
};
</script>
<style scoped>
.m-top {
  position: relative;
  z-index: 100;
  height: 70px;
  box-sizing: border-box;
  background: #242424;
  border-bottom: 1px solid #000;
}
.m-subnav {
  z-index: 99;
  height: 35px;
  box-sizing: border-box;
  background-color: #c20c0c;
  border-bottom: 1px solid #a40011;
}
.g-bd1 {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.g-bd1 {
  background: url("https://s2.music.126.net/style/web2/img/frame/wrap1.png?b5920fc115f1b7f825798ab3bc529810")
    repeat-y 100% 100%;
}
.g-mn1 {
  float: left;
  width: 100%;
  margin-right: -250px;
}
.g-sd1 {
  position: relative;
  float: right;
  width: 250px;
  zoom: 1;
}
.n-clmnad {
  position: relative;
  margin: 0px 0px 35px;
}
.g-mn1c {
  margin-right: 251px;
}
.g-wrap3 {
    padding: 20px 20px 40px;
}
.f-cb::after {
    clear: both;
    content: ".";
    display: block;
    height: 0px;
    visibility: hidden;
}
</style>